<style lang="less">
.vertical-center-modal {
  .ivu-modal {
    margin-top: 10%;
  }
}
</style>
<template>
  <div>

    <Form ref="formValidate" :model="tempData" :label-width="70">
      <FormItem label="收款日期" prop="Amount">
        <DatePicker style="width:150px" type="date" format="yyyy年MM月dd日" placeholder="" :clearable="false"
          v-model="tempData.OrderDate"></DatePicker>
      </FormItem>
      <FormItem label="收款金额" prop="Amount">
        <Input v-model="tempData.ChangeAmount" size="large" type="number"> <span slot="append">元</span>
        </Input>
      </FormItem>
      <FormItem label="优惠金额" prop="DiscountAmount">
        <Input v-model="tempData.DiscountAmount" size="large" type="number">
        <span slot="append">元</span>
        </Input>
        <div style="padding-top:5px">
          <Tag type="dot" color="error" size="large"><span
              style="font-size:14px">如:客户欠款5100元,给优惠100，则录入收款金额:5000，优惠金额:100</span> </Tag>
        </div>
      </FormItem>
      <FormItem label="备注" prop="Remark">
        <Input v-model="tempData.Remark" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" />
      </FormItem>
    </Form>
    <div class="div-footer">
      <Button type="text" @click="cancel()">取消</Button>
      <Button type="primary" :loading="loading" @click="AddCustomerPayLog">确定</Button>
    </div>
  </div>
</template>

<script>

import { AddCustomerPayLog } from '@/api/customer'

export default {
  name: 'customeredit',
  props: ['Id'],
  data () {
    return {

      loading: false,
      tempData: {
        OrderDate: ''
      }

    }
  },

  computed: {},

  methods: {
    cancel () {
      this.$emit('on-success', 0)
    },
    AddCustomerPayLog () {
      let vm = this
      vm.$refs['formValidate'].validate((valid) => {
        if (valid) {
          vm.loading = true
          vm.tempData.CustomerId = vm.Id
          if (typeof vm.tempData.OrderDate === 'object') {
            vm.tempData.OrderDate = vm.dayjs(vm.tempData.OrderDate).format('YYYY年MM月DD日')
          }
          AddCustomerPayLog(vm.tempData).then((res) => {
            vm.loading = false
            const data = res.data
            if (data.StatusCode == 200) {
              vm.$Message.success({ title: '提示', content: '保存成功' })
              vm.$emit('on-success', 1)
            } else {
              vm.$Message.error({ title: '提示', content: data.Errors })
            }
          })
        }
      })
    }

  },
  mounted () {
    this.tempData.OrderDate = this.dayjs().format('YYYY年MM月DD日')
  }
}
</script>

<style>
</style>
